<template>
  <!-- 批阅-随堂练习实验列表 -->
  <div id="s-item-bank" class="jx-content">
    <div class="search-box fl">
      <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="80px">
        <el-form-item label="学生信息 :">
          <el-input v-model="searchForm.studentInfo" placeholder="请输入学号或姓名"></el-input>
        </el-form-item>
        <el-form-item label="提交状态 :">
          <el-select v-model="searchForm.status" :clearable="true" placeholder>
            <el-option label="未提交" value="0"></el-option>
            <el-option label="已提交" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div @click="getList" class="button-style">搜 索</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-group fr">
      <el-form :inline="true">
        <el-form-item>
          <div @click="refreshList" class="button-style">刷 新</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="clear"></div>
    <div v-if="resData">
      <el-table :data="resData.content" style="width: 100%">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="userNumber" label="学号"></el-table-column>
        <el-table-column prop="userName" label="学生姓名"></el-table-column>
        <el-table-column prop="submitMessage" label="提交状态"></el-table-column>
        <el-table-column prop="checkMessage" label="评价状态">
          <template slot-scope="scope">
            <div v-if="scope.row.checkMessage">{{ scope.row.checkMessage }}</div>
            <div v-else style="color:#ccc;">—</div>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="实验报告评分">
          <template slot-scope="scope">
            <div v-if="scope.row.score || scope.row.check">{{ scope.row.score }}</div>
            <div v-else style="color:#ccc;">—</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div class="table-button">
              <a href="javascript:;" :class="{'btn-disabled':!scope.row.submit}" @click="saveReportId(scope.row.id,scope.row.submit)">查看实验报告</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pageNum" :page-size="resData.pageSize" :total="resData.total" layout="total, prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      classId: this.$route.query.id,
      chapterId: this.$route.query.chapterId,
      searchForm: {
        //学生姓名模糊查询
        studentInfo: "",
        //提交状态：0未提交，1已提交
        status: "",
        pageNum: 1
      },
      resData: {},
      currentPage: 10
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    //存储reportId
    saveReportId(id, submit) {
      let that = this;
      if (!submit) {
        return;
      }
      window.localStorage.setItem("reportId", id);
      let routerData = that.$router.resolve({
        path: "/MarkingTest",
        query: { id: that.classId, chapterId: that.chapterId }
      });
      window.open(routerData.href, "_blank");
    },
    //刷新
    refreshList() {
      this.getList();
      this.$message.success("刷新成功");
    },
    //获取table列表
    getList() {
      let that = this;
      axios
        .get(
          // "http://rap2api.taobao.org/app/mock/125327/course/{courseId}/check/type/{type}/class/{classId}/chapter/{chapterId}",
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/type/2/class/" +
            that.classId +
            "/chapter/" +
            that.chapterId,
          { params: that.searchForm }
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.resData = res.data.data;
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    handleSizeChange() {},
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#s-item-bank {
  .btn-disabled {
    cursor: not-allowed;
    background-color: none;
    border-color: none;
    color: #c0c4cc;
  }
  width: 1200px;
  margin: 20px auto 30px;
  .dialog-questions {
    .dialog-content {
      padding: 20px 64px 0;
      .question-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
      }
      .question-chose {
        font-size: 14px;
        line-height: 24px;
        padding: 6px 0;
        display: flex;
        .question-flex {
          flex: 1;
        }
      }
      .question-answer {
        font-size: 16px;
        .chose {
          font-size: 18px;
          color: #385899;
          vertical-align: -2px;
        }
        margin-top: 20px;
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .dialog-import-questions {
    .dialog-content {
      text-align: center;
      padding: 60px 0 40px;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .progress-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .progress-line {
      flex: 1;
      margin-right: 10px;
    }
  }
}
</style>
